<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="/js/js/vue.js"></script>
    <script src="/js/js/vue-router_3.0.2.js"></script>
    <style type="text/css">
        html,
        body,
        #app {
          margin: 0;
          padding: 0px;
          height: 100%;
        }
        .header {
          height: 50px;
          background-color: #545c64;
          line-height: 50px;
          text-align: center;
          font-size: 24px;
          color: #fff;
        }
        .footer {
          height: 40px;
          line-height: 40px;
          background-color: #888;
          position: absolute;
          bottom: 0;
          width: 100%;
          text-align: center;
          color: #fff;
        }
        .main {
          display: flex;
          position: absolute;
          top: 50px;
          bottom: 40px;
          width: 100%;
        }
        .content {
          flex: 1;
          text-align: center;
          height: 100%;
        }
        .left {
          flex: 0 0 20%;
          background-color: #545c64;
        }
        .left a {
          color: white;
          text-decoration: none;
        }
        .right {
          margin: 5px;
        }
        .btns {
          width: 100%;
          height: 35px;
          line-height: 35px;
          background-color: #f5f5f5;
          text-align: left;
          padding-left: 10px;
          box-sizing: border-box;
        }
        button {
          height: 30px;
          background-color: #ecf5ff;
          border: 1px solid lightskyblue;
          font-size: 12px;
          padding: 0 20px;
        }
        .main-content {
          margin-top: 10px;
        }
        ul {
          margin: 0;
          padding: 0;
          list-style: none;
        }
        ul li {
          height: 45px;
          line-height: 45px;
          background-color: #a0a0a0;
          color: #fff;
          cursor: pointer;
          border-bottom: 1px solid #fff;
        }
  
        table {
          width: 100%;
          border-collapse: collapse;
        }
  
        td,
        th {
          border: 1px solid #eee;
          line-height: 35px;
          font-size: 12px;
        }
  
        th {
          background-color: #ddd;
        }
      </style>
</head>
<body>
    <div id="app">
        <router-view ></router-view>
       
    </div>
     <script>
    // 组件
    var app = {
      template: `
        <div>
          <div class="header">后台管理系统</div>
          <div class="main">
            <div class="content left">
              <ul>
                <li><a href="#/user">用户管理</a></li>
                <li><a href="#/rights">权限管理</a></li>
                <li><a href="#/goods">商品管理</a></li>
                <li><a href="#/order">订单管理</a></li>
                <li><a href="#/settings">系统管理</a></li>
              </ul>
            </div>
            <div class="content right"><div>欢迎~</div><router-view></router-view></div>
          </div>
          <div class="footer">版权消息</div>
        </div>`
    }
    
    var user = {
      data: function() {
        return {
          tables: [
            { id: 1, tname: '张三', dizhi: '长沙' },
            { id: 2, tname: '李四', dizhi: '北京' },
            { id: 3, tname: '王五', dizhi: '上海' },
          ]
        }
      },
      template: `
        <div>
          <table>
            <tr>
              <td>id</td>
              <td>用户名</td>
              <td>地址</td>
              <td>详情</td>
            </tr>
            <tr v-for="item in tables">
              <td>{{ item.id }}</td>
              <td>{{ item.tname }}</td>
              <td>{{ item.dizhi }}</td>
              <td><a href="#" @click.prevent="showDetail(item)">详情</a></td>
            </tr>
          </table>
          <router-view></router-view>
        </div>`,
      methods: {
        showDetail(item) {
          // 通过编程式导航切换到详情页面
          this.$router.push({ path: 'xiangq', query: { id: item.id } });
        }
      }
    }
    
    var xiangq = {
      template: `
        <div>
          <h2>详情页面</h2>
          <p>id: {{ $route.query.id }}</p>
          <button @click='handle'>返回</button>
        </div>`,
        methods: {
        handle(){
            this.$router.go(-1)
        }
      }
    }

    
    var rights={
        template:`<div>权限管理</div>`
    }
    var goods={
        template:`<div>商品管理</div>`
    }
    var order={
        template:`<div>订单管理</div>`
    }
    var settings={
        template:`<div>系统管理</div>`
    }

    // 嵌套路由配置
    var router = new VueRouter({
      routes: [
        { path: '/', redirect: '/app' },
        {
          path: '/app', component: app,
          children: [
            {path: '/', redirect: '/user'},
            {path: '/user', component: user,},
            {path: '/xiangq', component: xiangq},
            {path: '/rights', component: rights,},
            {path: '/goods', component: goods,},
            {path: '/order', component: order,}, 
            {path: '/settings', component: settings,},
          ]
        }
      ]
    })
    
    var vm = new Vue({
      el: '#app',
      router: router // 挂载路由
    })
  </script>
</body>
</html>